import PropTypes from "prop-types";
import React from 'react';
function Son ({ name, mySelfName, isFlag, children }) {
    // react的插槽只能自定义
    let defaultSlot = []
    let topSlot = []
    let bottomSlot = []
    // 有时候children可能为空，react封装一下直接是个数组
    React.Children.forEach(children, (item) => {
        if (item.props.slot === 'top') {
            topSlot.push(item)
        } else if (item.props.slot === 'bottom') {
            bottomSlot.push(item)
        } else {
            defaultSlot.push(item)
        }
    })
    return (
        // <div>我是子组件</div>
        <div>
            {/* react可以把虚拟dom直接渲染出来 */}
            {topSlot}
            <div>
            {defaultSlot}
            </div>
            父组件传来的值：{name}
            <div>{mySelfName}</div>
            <div>布尔值:{isFlag ? 'true' : 'false'}</div>
            {bottomSlot}
        </div>
    );
}
// 设置默认值
Son.defaultProps = {
    name: '自己的值',
    mySelfName: '我是默认值'
}
// 设置类型校验
Son.propTypes = {
    name: PropTypes.string.isRequired,
    isFlag: PropTypes.oneOfType([PropTypes.bool, PropTypes.number])//两个值中的一个
}


export default Son;